<template>
	<view class="">
		<search placeholder="请输入客户名称/电话" @input="inputChange"></search>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :top="'100rpx'" @up="upCallback">
			<uni-list>
				<view class="item" v-for="(item,index) in listdata" :key="item.cluesId">
					<view class="title-container">
						<text style="font-weight:bold;" class="title">{{item.customerName}}</text>
						<image class="rightContent"
							:src="item.customerType == 2 ? '../../static/common/company.png' : '../../static/common/personal.png'"
							mode="aspectFit"></image>
					</view>
					<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
					<title-content title="联系人:" :content=" item.contact" v-show="item.customerType == 2">
					</title-content>
					<title-content title="电话:" :content=" item.phone"></title-content>
					<title-content title="线索状态:" :content="item.cluesStateStr"></title-content>
					<title-content title="创建时间:" :content="item.createTime"></title-content>
					<title-content title="最后跟进时间:" :content="item.updateTime"></title-content>

					<view style="display: inline-flex; justify-content: flex-end;">
						<view class="bottomBtn" style="background-color: #FFC500;" @click="clickBottomBtn(1, item)">
							查 看
						</view>
						<view class="bottomBtn" style="background-color: #1573FF;" @click="clickBottomBtn(2, item)">
							跟 进
						</view>

					</view>

				</view>
			</uni-list>
		</mescroll-uni>
	</view>
</template>

<script>
	import titleContent from '../../components/global/title-content.vue'
	import search from '../../components/search.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			titleContent,
			search
		},

		data() {
			return {
				page: 1,
				listdata: [],
				searchWord: ""
			}
		},

		onLoad() {
			uni.$on('refreshClueList', res=> {
				this.updateClueList();
			})
		},

		methods: {
			//获取数据
			getData() {
				this.$u.api.getCluesList({
						nameOrPhone: this.searchWord,
						pageNo: this.page,
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},

			//上拉加载回调
			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.page = page.num;
				this.getData();
			},
			//搜索监听事件
			inputChange(value) {
				this.searchWord = value;
				this.getData();
			},

			//刷新列表
			updateClueList() {
				this.page = 1;
				this.getData();
			},

			//底部按钮的点击事件
			clickBottomBtn(type, item) {
				var cluesObj = JSON.stringify(item);
				if (type == 1) { //查看
					uni.navigateTo({
						url: 'clue-detail?cluesId=' + item.cluesId,
					})
				} else if (type == 2) { //跟进
					uni.navigateTo({
						url: 'clue-follow?cluesObj=' + cluesObj,
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.title-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}

	.title {
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}


	.rightContent {
		margin-right: 0rpx;
		justify-content: flex-end;
		width: 100rpx;
		height: 40rpx;
	}

	.bottomBtn {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}
</style>
